<template>
    <div class="myheader">
        <div class="myheader-top">
            <div class="myheader-left">
                <!-- <i
                :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                @click="onCollapse"
              ></i> -->
            </div>
            <div>
                <div>
                    <span style="color: #ff7171;">
                        本系统后期将停止维护，请体验新系统，若有问题请及时反馈：<a href="https://nnyy.13yu.com/" style="color:#409EFF" target="_blank">点击前往</a>
                    </span>&nbsp;&nbsp;
                    <el-dropdown trigger="click" @command="onCommand">
                        <span class="el-dropdown-link myheader-span">
                            <svg t="1714018451408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6694" width="16" height="16"><path d="M91 177.2m-91 0a91 91 0 1 0 182 0 91 91 0 1 0-182 0Z" fill="#1677FF" p-id="6695"></path><path d="M933 177.2m-91 0a91 91 0 1 0 182 0 91 91 0 1 0-182 0Z" fill="#1677FF" p-id="6696"></path><path d="M929.6 382c-37.7 0-68.3 30.6-68.3 68.3-0.2 193.7-157.3 350.7-351 351-193.8-0.2-350.8-157.2-351-351 0-37.7-30.6-68.3-68.3-68.3s-68.3 30.6-68.3 68.3c0.3 269.1 218.4 487.2 487.5 487.5 269.1-0.3 487.2-218.4 487.5-487.5 0.1-37.7-30.4-68.3-68.1-68.3z" fill="#1677FF" p-id="6697"></path></svg>
                            欢迎, {{ user.username }}【{{subject[user.is_subject] ? subject[user.is_subject] : user.is_subject}}】<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="myheader-tag">
            <TagList
                v-if="
          activeIndex != 'HR' &&
          activeIndex != 'HRTwo' &&
          activeIndex != 'HRThree'
        "
            />
        </div>
    </div>
</template>

<script>
import { getStore } from "@/utils/localStorage.js";
import TagList from "@/views/Container/TagList";
import {Notification} from "element-ui";
export default {
    components: {
        TagList,
    },
    data() {
        return {
            isCollapse: false,
            user: "",
            activeIndex:"",
            subject: {"kz": "年年有余", "mz": "妙哉文化", "xm": "亦亦上弦", "yx": "著风和雨", "js": "庄周梦蝶"}
        };
    },
    mounted() {
        this.user = getStore("userinfo");
        this.activeIndex = this.$route.matched[1].name;
        this.$notify({
            title: '重要通知',
            dangerouslyUseHTMLString: true,
            message: '本系统后期将停止维护，请体验新系统，若有问题请及时反馈：<a href="https://nnyy.13yu.com/" style="color:#409EFF" target="_blank">点击前往</a>',
            duration: 30000 // 显示时间，单位为毫秒
        });
    },
    methods: {
        onCollapse() {
            this.isCollapse = !this.isCollapse;
            this.$store.commit("mutationsIsCollapse");
        },
        onCommand(e) {
            if (e == "loginOut") {
                localStorage.clear();
                this.$router.push("/qrCode");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.myheader {
    width: 100%;
    display: flex;
    flex-direction: column;
    .myheader-top {
        background: #ffffff;
        font-size: 14px;
        height: 30px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    .myheader-tag {
        height: 32px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
}
.myheader-tag::-webkit-scrollbar {
    display: none;
} // 隐藏滚动条
</style>
